<template>
  <ul class="playlist">
    <li class="playlistHeader">
      <span class="kongbai"></span>
      <span class="title">音乐标题</span>
      <span class="singer">歌手</span>
      <span class="album">专辑</span>
      <span class="duration">时长</span>
      <span class="pop">热度</span>
    </li>
    <li
      v-for="(item, index) of songsList" :key="item"
      @dblclick="selectSong(item.id)"
      :class="{
        'playlistItem': true,
        'playlistActive': item.id === target
      }"
    >
      <div class='kongbai'>
        <span v-if="item.id !== target" class="index">{{(index + 1 + offset).toString().padStart(2, '0')}}</span>
        <i v-if="item.id === target && playing" class="iconfont iconyangshengqispeaker85 index"/>
        <i v-if="item.id === target && !playing" class="iconfont iconyangshengqispeaker88 index"/>
        <i class="iconfont iconxihuan"/>
        <i class="iconfont iconxiazai"/>
      </div>
      <div class="title">
        <span class="title-name">{{ item.name }}</span>
        <span v-if="item.mv !== 0" class="mv" @click="selectMv(item.mv)">MV</span>
      </div>
      <div class="singer">
        <template v-for="(artist, artistsCount) of item.artists" :key="artist">
          <span>{{artist.name}}</span>
          <span v-if="artistsCount !== item.artists.length - 1" class="geli">/</span>
        </template>
      </div>
      <div class="album" @click.stop="selectAlbum(item.alId)">{{ item.alName }}</div>
      <div class="duration">{{ item.duration }}</div>
      <div class="pop">
        <Progress :percentage = 'item.pop' />
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { player } from '@/store/modules/player'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import Progress from './Progressbar.vue'

export default {
  name: 'Index',
  props: {
    songsList: {
      type: Array,
      default: () => []
    },
    offset: {
      type: Number,
      default: 0
    }
  },
  components: {
    Progress
  },
  setup () {
    const router = useRouter()
    const playing = computed(() => player.playing)
    const target = computed(() => player.currentSongLists[player.currentIndex])
    const selectSong = (id) => {
      player.selectDanqu(id)
    }
    const selectMv = (mv) => {
      router.push({ name: 'video', params: { id: mv } })
    }
    const selectAlbum = (album) => {
      router.push({ name: 'albumDetail', params: { id: album } })
    }
    return {
      playing,
      target,
      selectMv,
      selectSong,
      selectAlbum
    }
  }
}
</script>

<style lang="scss" scoped>
.playlist {
    width: 100%;
    font-size: 13px;

    .playlistItem:nth-of-type(even) {
      background-color: #f8f8f8;
    }

    .playlistItem:nth-of-type(odd) {
      background-color: #f0f0f0;
    }

    .playlistHeader {
      color: #666666;
    }

    li {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      text-align: left;
      height: 40px;

      .kongbai {
        flex: 0 0 120px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        color: #bdbdbd;

        >i {
          margin-right: 15px;
        }

        .index {
          margin-right: 20px;
        }
      }

      .title {
        flex: 0 0 300px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        padding-left: 20px;

        .title-name{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          line-height: 1.4;
        }

        .exclusive {
          border: 1px solid #ec4141;
          color: #ec4141;
          background-color: #fef6f6;
          padding: 1px 1px;
          border-radius: 3px;
          margin-left: 6px;
        }

        .mv {
          border: 1px solid #ec4141;
          color: #ec4141;
          background-color: #fef6f6;
          padding: 1px 1px;
          border-radius: 3px;
          margin-left: 6px;
          font-weight: 600;
          cursor: pointer;
        }
      }

      .singer {
        flex: 1;
        color: #666666;
        text-overflow: ellipsis;
        line-height: 1.4;
        overflow: hidden;
        white-space: nowrap;
        box-sizing: border-box;
        padding-left: 20px;

        span {
          line-height: 60px;
        }

        .geli {
          padding-left: 3px;
          padding-right: 3px;
        }
      }

      .album {
        flex: 0 0 220px;
        color: #666666;
        line-height: 60px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding-left: 20px;
      }

      .duration {
        flex: 0 0 80px;
        color: #666666;
        line-height: 60px;
      }

      .pop {
        flex: 0 0 100px;
        margin-right: 15px;
      }
    }

    .playlistItem {
      cursor: default;

      &:hover {
        background-color: #e2e2e2;
      }
    }

    .playlistActive {
      background-color: #e5e5e5 !important;

      .kongbai {

        .index {
          color: #ec4141;
        }
      }

      .title {

        .title-name {
          color: #ec4141;
        }
      }
    }
  }
</style>
